<template>
  <div class="app-container">
  <el-card class="box-card" shadow="never" style="border:0px;">
      <div slot="header" style="color:#303133;font-size:14px;font-weight:bold;">
        <span>组织架构</span>
      </div>
<!--    <vxe-toolbar ref="xToolbar" v-show="isAddDept">-->
<!--         <template #buttons>-->
<!--        <el-button type="text" icon="el-icon-plus" @click="addDeptWindow()">新增部门</el-button>-->
<!--        </template>-->
<!--    </vxe-toolbar>-->
    <el-table
      :data="treeData"
      style="width: 100%"
      row-key="id"
      align="center"
      lazy
      default-expand-all
      :header-cell-style="{ background: '#F7F7F8', color: '#606266' }"
      v-loading="loading">
      <el-table-column prop="deptName" label="部门名称" width="300" />
      <el-table-column prop="orgName" label="归属机构" width="160" align="center"/>
      <el-table-column prop="deptManager" label="部门主管" width="120" align="center"/>
<!--      <el-table-column prop="empNum" label="员工人数" width="100" />-->
      <el-table-column prop="deptStatusName" label="状态"  width="120" align="center"/>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
<!--      <el-table-column prop="available" label="是否删除" width="280">-->
<!--        <template v-slot="{ row }">-->
<!--          <el-button type="info" size="mini"  @click="deleteById(row.id)" v-if="row.available === true">恢复部门</el-button>-->
<!--          <el-button type="success" size="mini" v-if="row.available === false">未删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" fixed="right" width="280" align="center">
        <template v-slot="{ row }" >
          <span v-if="row.parentDeptId != '0'">
            <el-button type="primary" round size="mini" @click="addDeptWindow(row)">新增</el-button>
            <el-button  type="success" round size="mini"  @click="updateDeptWindow(row)">编辑</el-button>
  <!--          <el-button type="text" @click="getDeptUser(row.id)">员工管理</el-button>-->
  <!--          <el-button type="danger" round size="mini"  @click="deleteById(row.id)" v-if="row.deptStatus === 2 && row.available === false">删除</el-button>-->
            <el-button  type="info" round size="mini"  @click="enableDept(row)" v-if="row.deptStatus === 2">启用</el-button>
            <el-button  type="warning" round size="mini"  @click="disableDept(row)" v-if="row.deptStatus === 1">禁用</el-button>
          </span>
          <span v-if="row.parentDeptId === '0'">
            <el-button type="text" round size="mini">-</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!--  新增部门 -->
    <vxe-modal
      @close="closeModal"
      v-model="addOrUpdateModel"
      width="700px"
      height="450px"
      :title="'新增&修改'"
      class="addModal"
    >
      <el-form :model="addOrUpdateForm" title-align="left" title-width="100" ref="addOrUpdateForm"  label-width="100px" style="width:80%;margin-top:10px;">
        <el-form-item label="父级部门" prop="parentDeptId" hidden>
          <el-input v-model="addOrUpdateForm.parentDeptId" disabled></el-input>
        </el-form-item>
        <el-form-item label="归属机构"  prop="orgId">
          <el-select v-model="addOrUpdateForm.orgId" placeholder="请选择机构" style="width:100%" disabled>
            <el-option v-for="(item, index) in orgs" :key="index" :label="item.orgName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName" :rules="[{ required: true, message: '部门名称不能为空' }]">
          <el-input v-model="addOrUpdateForm.deptName" placeholder="请输入部门名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门主管" prop="deptManagerId" :rules="[{ required: true, message: '部门主管不能为空' }]">
          <el-select v-model="addOrUpdateForm.deptManagerId" placeholder="请选择部门主管" style="width:100%">
            <el-option v-for="(item, index) in deptManager" :key="index" :label="item.displayName + '：' + item.phone" :value="item.id+''" />
          </el-select>
        </el-form-item>

<!--        <el-form-item label="员工"  prop="userIds" v-if="addOrUpdateForm.id == undefined">-->
<!--          <el-select v-model="addOrUpdateForm.userIds" placeholder="请选择员工" multiple style="width:100%">-->
<!--            <el-option v-for="(item, index) in deptUser" :key="index" :label="item.displayName + '：' + item.phone" :value="item.id" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="addOrUpdate('addOrUpdateForm')" status="primary">提交</el-button>
          <el-button @click="closeModal" status="danger">取消</el-button>
        </el-form-item>
      </el-form>
    </vxe-modal>
  </el-card>
  </div>
</template>

<script>
import { tree, deptDistinct, deleteById, edit, findDeptUsers, insert,disable,enable } from '@/api/dept';
import { allOrg } from '@/api/org';
export default {
  name: 'dept',
  data: function () {
    return {
      active: 0,
      treeData: [],
      total: 0,
      loading: true,
      deptTree: [],
      deptManager: [],
      deptUser: [],
      orgs: [],
      addOrUpdateForm: {
        id: undefined,
        deptName: undefined,
        deptManagerId: undefined,
        userIds: undefined,
        parentDeptId: undefined,
        orgId: undefined,
      },
      addOrUpdateModel: false,
      orgId: undefined
    };
  },
  mounted: function () {
    this.orgId = this.$route.query.orgId;
    this.tree();
    this.deptDistinct();
  },

  methods: {
    edit(data) {
      edit(data).then((data) => {
        this.$notify.success({title: '成功',message: '操作成功',});
        this.fresh();
      });
    },
    changePage() {
      this.tree();
    },

    // deleteById(deptId) {
    //   this.$confirm('确定要执行该操作吗?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //   })
    //     .then(() => {
    //       deleteById(deptId).then((data) => {
    //         this.fresh();
    //         this.$notify.success({title: '成功',message: '删除成功',});
    //       });
    //     })
    //     .catch(() => {this.$message({type: 'info',message: '已取消删除',});});
    // },

    // 关闭窗口
    closeModal() {
      this.addOrUpdateModel = false;
    },

    fresh(addOrUpdateForm) {
      this.addOrUpdateModel = false;
      this.tree();
      this.$refs[addOrUpdateForm].resetFields();
      this.restForm();
    },

    // 启用
    enableDept(row) {
      enable(row.id).then((data) => {
        this.$notify.success({title: '成功',message: '操作成功',});
        this.fresh();
      });
    },

    // 禁用
    disableDept(row) {
      disable(row.id).then((data) => {
        this.$notify.success({title: '成功',message: '操作成功',});
        this.fresh();
      });
    },

    tree() {
      this.loading = true;
      tree(this.$route.query.orgId).then((data) => {
        this.treeData = data.data;
        this.total = data.total;
        console.log('响应数据:%o', data);
        this.loading = false;
      });
    },

    deptDistinct() {
      deptDistinct().then((data) => {
        var res = data.data;
        res.forEach((item) => {
          this.deptTree.push(item.deptName);
        });
      });
    },

    findDeptUsers() {
      findDeptUsers().then((data) => {
        this.deptManager = data.data;
        this.deptUser = data.data;
      });
    },

    getDeptUser(deptId) {
      this.$router.push({
        path: '/permision/deptUserIndex',
        query: { deptId: deptId},
      });
    },

    // 打开窗口
    addDeptWindow(row) {
      console.log(row)
      this.addOrUpdateModel = true;
      this.findDeptUsers();
      this.allOrg();
      var orgId = null;
      this.addOrUpdateForm = {
        deptName: undefined,
        deptManagerId: undefined,
        userIds: undefined,
        id: undefined,
        parentDeptId: row === undefined ? '' : row.id,
        orgId: row === undefined ? this.orgId : row.orgId
      };
      orgId = row === undefined ? this.orgId : row.orgId;
      this.$refs['addOrUpdateForm'].resetFields();
    },

    // 打开编辑窗口
    updateDeptWindow(row) {
      this.findDeptUsers();
      this.addOrUpdateModel = true;
      this.getUpdateFormParams(row);
      this.allOrg();
    },

    addOrUpdate(addOrUpdateForm) {
      var id = this.addOrUpdateForm.id;
      if (id != null) {
        // 修改
        this.edit(this.addOrUpdateForm);
      } else {
        this.$refs[addOrUpdateForm].validate((valid) => {
          if (valid) {
            // 提交
            insert(this.addOrUpdateForm).then((data) => {
              this.$notify.success('操作成功');
              this.fresh(addOrUpdateForm);
            });
          } else {
            return false;
          }
        });
      }
    },

    restForm() {
      this.addOrUpdateForm = {
        deptName: undefined,
        deptManagerId: undefined,
        userIds: undefined,
        id: undefined,
      };
      this.$refs['addOrUpdateForm'].resetFields();
    },

    restQueryForm() {
      this.listQuery = {
        pageNo: 1,
        pageSize: 10,
        name: undefined,
        mobile: undefined,
        deptId: undefined,
      };
      this.listByPage();
    },

    // 查询所有机构
    allOrg(){
      allOrg().then((data) => {
        this.orgs = data.data;
        this.loading = false;
      });
    },

    getUpdateFormParams(row) {
      this.addOrUpdateForm = {
        deptName: row.deptName,
        deptManagerId: row.deptManagerId,
        id: row.id,
        orgId: row.orgId,
      };
    },
    cellDblclick({row,rowIndex,column,columnIndex,cell},event) {
      let _this = this;
      this.$copyText(event.target.innerText).then(function() {
        _this.$message.info('复制成功');
      });
    }
  },
};
</script>
<style lang="scss">
  .addModal{
    .el-form-item__error {
      padding-top: 0;
      line-height: 0.7;
    }
  }
  
</style>

<style lang="css" scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
}

.pager{
  position: fixed;
  bottom: 0;
  right: 28px;
  background-color: #FAFAFB;
  z-index: 2;
  height: 40px;
  width: calc(100% - 260px);
  }

.right >>> .el-button--primary,.el-button--default {
  padding: 10px 20px;
}

.vxe-table--render-default >>> .el-button--text{
  color: #2b7bfb;
}
.app-container >>> .vxe-table--render-default,.vxe-pager {
  font-family: PingFangSC, Arial, Helvetica, sans-serif;
}

.left {
  flex: 14;
  display: flex;
  flex-flow: row wrap;
  margin-right: 20px;
}
.left >>> .el-form {
  width: 100%;
}
.left >>> .el-form .el-form-item {
  display: flex;
  flex-flow: row nowrap;
  width: 30%;
  margin-right: 3%;
  float: left;
  margin-bottom: 14px;
}

.left >>> .el-form .el-form-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
  text-align: left;
  /* flex: 1; */
}

.left >>> .el-form .el-form-item .el-form-item__content {
  flex: 1;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
  width: 100%;
}
.date_item {
  width: 100%;
}
.right {
  flex: 2;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  /* margin-top: 30px; */
  margin-right: 30px;
  /* margin-bottom: 30px;  */
}
</style>
